<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>websocket首页</title>
</head>
<body>
<p>websocket页面</p>
<input type="button" value="链接" onclick="connection()"/>
<input type="button" value="发送" onclick="sendTo()"/>
<input name="name" id="name" type="text"/>
<textarea name="msg" id="msg"></textarea>
</body>
<script type="application/javascript" th:src="@{webjars/stomp-websocket/stomp.min.js}"></script>
<script type="application/javascript" th:src="@{webjars/sockjs-client/sockjs.min.js}"></script>
<script type="application/javascript" th:src="@{webjars/jquery/jquery.js}"></script>
<script>
    var stomp;
    function connection() {
        var sockJS = new SockJS('/endpointDemo');
        stomp = Stomp.over(sockJS);
        stomp.connect({},function(context){
            console.log(context);
            stomp.subscribe('/topic/getResponse',function(response){
                $('#name').val(JSON.parse(response.body).name);
                $('#msg').val(JSON.parse(response.body).msg);
            });
        });
    }

    function sendTo() {
        var name = $('#name').val();
        stomp.send('/sendPoint',{},JSON.stringify({'name':name}));
    }

</script>
</html>